<template>
  <div class="employee_list">
    <one-title title="人员管理" @refreshData="refresh">
      <div class="mes_btn">
        <!--<el-button @click="showDeleteDialog">
          <i class="iconfont icon-btn_delete"></i>
          删除
        </el-button>-->
        <el-tooltip
          effect="dark"
          :content="editBtnStatus.content"
          :disabled="!editBtnStatus.status"
          popper-class="btn_tooltip"
          placement="bottom">
          <el-button
            v-btn-permission="'edit'"
            @click="_edit" :class="{'is-disabled':editBtnStatus.status}">
            <i class="iconfont icon-btn_edit"></i>
            修改
          </el-button>
        </el-tooltip>
        <!--<el-button type="success" @click="_add">
          <i class="iconfont icon-btn_addnew"></i>
          新增
        </el-button>-->
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :searchList="searchList"
        ref="mesSearch"
        :searchResult="searchResult"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          ref="tableNode"
          :data="listData.list"
          v-loading="isLoading"
          style="width: 100%"
          :max-height="tableMaxHeight"
          border
          stripe
          :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="(row) => $refs.tableNode.toggleRowSelection(row)"
          @sort-change="_sort"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="40"
            align="center">
          </el-table-column>
          <mes-col-comp
            :key="index"
            v-for="(column, index) in tableColumns"
            :column="column"
            @jump="row => $linkToDetail(row, 'employeeDetail')"
          ></mes-col-comp>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
  </div>
</template>

<script>
import tableColumns from './tableColumns'

export default {
  name: 'Employee',
  data() {
    return {
      isLoading: true, // 数据加载中
      selectData: [], // 表格勾选列表
      searchData: {}, // 列表查询数据
      searchResult: NaN, // 搜索结果数
      sortData: {}, // 排序对象
      tableColumns: tableColumns, // 列数组
    }
  },
  computed: {
    // 人员列表数据
    listData() {
      return this.$store.state.employee.listData
    },
    // 人员列表查询条件
    searchList() {
      let searchList = this.tableColumns || []
      return searchList
    },
    // 编辑按钮
    editBtnStatus() {
      let status = this.selectData.length > 1
      return {
        status: status,
        content: '请选择一个人员'
      }
    },
  },
  components: {
  },
  mounted() {
    this.init()
  },
  methods: {
    // 列表初始化
    init(page) {
      const list = this.tableColumns.filter((item) => item.noForCol !== true)
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/staff/staff/list',
        module: 'employee',
        data: {
          pageNo: page ? page.pageNo : 1,
          pageSize: page ? page.pageSize : this.listData.pageSize || 15,
          query: {
            columns: list.map((item) => item.prop),
            ...this.searchData
          }
        },
        state: 'listData'
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then(res => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 刷新方法
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    /**
     * 点击查询按钮
     * @param data 查询条件
     */
    _info(data) {
      this.$refs.tableNode.clearSort()
      this.sortData = {}
      this.searchData = data
      this.init()
    },
    /**
     * 勾选列表事件
     * @param val
     */
    handleSelectionChange(val) {
      this.selectData = val
    },
    /**
     * 进入新增人员页面
     * @private
     */
    _add() {
      this.$router.push({
        path: 'employeeDetail'
      })
    },
    // 点击删除
    showDeleteDialog() {
      if (!this.selectData.length) {
        this.errorMessage('未选择任何数据')
        return false
      }
      this.confirmDelete().then(() => {
        this.deleteList()
      })
    },
    // 删除
    deleteList() {
      let postData = {
        method: 'post',
        url: '/a/staff/staff/deleteBatch',
        module: 'employee',
        data: {
          staffList: this.selectData
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', postData).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功',
          duration: 1500,
          center: true
        })
        this.init()
      })
    },
    /**
     * 进入详情页面编辑
     * @private
     */
    _edit() {
      if (!this.selectData.length) {
        return this.errorMessage('请选择一个人员')
      }
      if (this.editBtnStatus.status) return
      this.$router.push({
        path: 'employeeDetail',
        query: {
          id: this.selectData[0].id
        }
      })
    },
    errorMessage(str) {
      this.$message({
        type: 'error',
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
</style>
